<template>
  <view class="congratulations-container">
    <!-- 恭喜过关熊猫图标 -->
    <view class="panda-icon">
      <u-image src="https://www.afbeijing.net/static_resources/assets/gongxiguoguan.png" mode="widthFix" style="width: 255rpx; height: 150rpx"></u-image>
      <!-- 积分提示框 -->
      <view class="score-box">
        <!-- <u-image src="https://www.afbeijing.net/static_resources/assets/jifenkuang.png" mode="widthFix" style="width: 56rpx; height: 35rpx;"></u-image> -->
        <text style="padding-right: 3rpx;font-size: 32rpx;">+ {{ score }}</text>
		<text style="color:#FFB607;font-size: 32rpx;font-weight: bold;padding-left: 10rpx;">分</text>
        <!-- <u-icon style="padding-top: -2rpx;" color="#FFB607" name="star-fill" size="18"></u-icon> -->
      </view>
    </view>
    <!-- 按钮区域 -->
    <view class="button-container" v-if="showButton">
      <!-- 重玩一遍按钮 -->
      <view class="button2" @click="restartGame()">重玩一遍</view>
      <!-- 倒计时开启下一关按钮 -->
      <!-- <view class="button2" @click="startNextLevel()">{{ countdown }}秒后开启下一关</view> -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
	  showButton:false,//默认关闭
      score: 5, // 获得的积分数量，可根据实际情况修改
      countdown: 35 // 倒计时初始值
    };
  },
  onLoad(e) {
	console.log(e,'222')
	this.showButton=Boolean(e.showButton)
    // this.startCountdown();
  },
  methods: {
    // 开始倒计时
    startCountdown() {
      const timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
        } else {
          clearInterval(timer);
          // 倒计时结束，执行开启下一关的逻辑
          this.startNextLevel();
        }
      }, 1000);
    },
    // 重玩一遍按钮点击事件
    restartGame() {
      console.log('重玩一遍');
	  uni.navigateBack({
	      delta: 1, // 返回层数，2则上上页
	      success() {
	          // uni.$emit('update',{refresh:true})
	      }
	  })
      // 这里可以添加重玩游戏的逻辑
    },
    // 开启下一关按钮点击事件
    startNextLevel() {
      console.log('开启下一关');
      // 这里可以添加开启下一关的逻辑
    }
  }
};
</script>

<style lang="scss" scoped>
	@import "~@/static/styles/variables.scss";
.congratulations-container {
  display: flex;
  justify-content: center;
  height: 100vh;
}

.panda-icon {
  position: relative;
  top: 20%;
}

.score-box {
	background-image: url(#{$bgImageUrl}/assets/jfbjt.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	width: 156.34rpx;
	height: 85.1rpx;
	
	color: #FFFFFF;
	position: absolute;
	top: -20rpx;
	right: -30rpx;
	display: flex;
	justify-content: center;
	padding-left: 10rpx;
	padding-top: 15rpx;
}
.star{
	color: #FFB607;
}
.button-container {
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: calc(120px + constant(safe-area-inset-bottom));
  bottom: calc(120px + env(safe-area-inset-bottom));
}
.button1{
	width: 115rpx;
	height: 37rpx;
	background: #808080;
	border-radius: 18rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-weight: bold;
	font-size: 17rpx;
	color: #FFFFFF;
	line-height: 37rpx;
}
.button2{
	width: 215rpx;
	height: 67rpx;
	background: #FF8106;
	border-radius: 18rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-weight: bold;
	font-size: 32rpx;
	color: #FFFFFF;
	line-height: 67rpx;
}
</style>